<template>
  <div>
    <ul>
      <li v-for="(item,index) in menus" :key="index" @click="goToPage(item.url)">
        {{item.name}}
      </li>
    </ul>
  </div>
</template>

<script>
  const menus = [
    {
      name: 'base',
      url: '/base'
    },
    {
      name: 'slot',
      url: '/slot'
    },
    {
      name: 'instruction',
      url: '/instruction'
    },
    {
      name: 'input',
      url: '/input'
    },
    {
      name: 'component',
      url: '/component'
    },
    {
      name: 'propv2',
      url: '/propv2'
    },
    {
      name: 'myevent',
      url: '/myevent'
    },
    {
      name: 'componentV2',
      url: '/componentV2'
    },
    {
      name: 'boundary',
      url: '/boundary'
    },
    {
      name: 'action',
      url: '/action'
    },
    {
      name: 'mixin',
      url: '/mixin'
    },
    {
      name: 'bind',
      url: '/bind'
    },
    {
      name: 'render',
      url: '/render'
    },
    {
      name: 'filters',
      url: '/filters'
    },
    {

      name: 'eventBus',
      url: '/eventBus'
    },
    {

      name: 'AAA',
      url: '/AAA'
    },
    {
      name: 'TestMain',
      url: '/TestMain'
    },
    {
      name: 'testUpdate',
      url: '/testUpdate'
    },
    {
      name: 'portal3',
      url: '/portal3'
    },
    {
      name: 'sass',
      url: '/sass'
    }
  ]

  export default {
    name: "navigation",
    data() {
      return {
        menus: menus
      }
    },
    methods: {
      goToPage(url) {
        this.$router.push(url)
      }
    },
    mounted() {
      console.log(this.$route.path)
      console.log(this.$route.params)
      console.log(this.$route.query)
    }
  }
</script>

<style scoped>
  ul {
    list-style: none;
  }
  li {
    margin-top: 10px;
  }
</style>
